<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            width: 800px;
            height: 500px;
            border: 10px tomato solid;
        }

        .box2{
            width: auto;
            margin-left: auto;
            margin-right: auto;
            height: 200px;
            margin-top: auto;
            margin-bottom: auto;
            background-color: yellowgreen;
        /*
            子元素会在父元素内容区中排列

            在文档流中，块元素的水平排列，必须要遵循如下一个等式：
                子元素可见框宽度 + 子元素的水平外边距 = 包含块内容区的宽度
                    200 + 600 = 800
            margin-left + 可见框 + margin-right = 包含块内容区的宽度
                    100 + 200 + 100 = 800  右外边距会自动修正为500
                    500 + 500 + 100 = 800  右外边距会自动修正为-200
                    100 + auto + 100 = 800 宽度为auto，会自动设置为600
                    auto + 200 + auto = 800
                    auto + auto + 200 = 800
                    - 当所有的属性值中没有auto，此时浏览器会自动调整右外边距以使等式强制满足
                    - 当只有一个属性值设置为auto，则浏览器会自动调整该值以使等式满足
                    - 当左右外边距为auto，而width有值时，则左右外边距会设置为相等的值，以使等式满足
                    - 当外边距和width同时设置为auto，则设置auto的外边距就是0

            在文档流中，块元素的垂直排列，不需要遵循等式！




            margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 包含块内容区的宽度

        */
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>